<template>
  <view class="chat-page">
    <view class="chat-title">问诊消息列表</view>
    <view class="chat-list">
      <view class="chat-card" v-for="(item, idx) in chatList" :key="idx">
        <image class="chat-avatar" :src="item.avatar" mode="aspectFill" />
        <view class="chat-main">
          <view class="chat-row">
            <text class="chat-name">{{ item.name }}</text>
            <text class="chat-tag" :class="item.roleClass">{{
              item.role
            }}</text>
            <text class="chat-time">{{ item.time }}</text>
          </view>
          <view class="chat-msg">{{ item.msg }}</view>
        </view>
        <view v-if="item.unread > 0" class="chat-unread">
          {{ item.unread }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chatList: [
        {
          avatar: "/static/tabbar/i3.png",
          name: "医生姓名",
          role: "主任医师",
          roleClass: "tag-main",
          time: "10:20",
          msg: "消息消息消息预览...",
          unread: 1,
        },
        {
          avatar: "/static/tabbar/i3.png",
          name: "医生姓名",
          role: "主任医师",
          roleClass: "tag-main",
          time: "10:20",
          msg: "消息消息消息预览...",
          unread: 3,
        },
        {
          avatar: "/static/tabbar/i3.png",
          name: "医生姓名",
          role: "专家",
          roleClass: "tag-expert",
          time: "10:20",
          msg: "消息消息消息预览...",
          unread: 0,
        },
        {
          avatar: "/static/tabbar/i2.png",
          name: "患者姓名",
          role: "患者",
          roleClass: "tag-patient",
          time: "10:20",
          msg: "消息消息消息预览...",
          unread: 0,
        },
      ],
    };
  },
};
</script>

<style scoped>
.chat-page {
  background: #e5e5e5;
  min-height: 100vh;
  padding: 0 0 40rpx 0;
}

.chat-title {
  text-align: center;
  font-size: 38rpx;
  font-weight: bold;
  color: #444;
  margin: 40rpx 0 30rpx 0;
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 36rpx;
  padding: 0 0 0 0;
}

.chat-card {
  background: #fff;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  padding: 28rpx 32rpx;
  margin: 0 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  position: relative;
}

.chat-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  object-fit: cover;
  background: #eee;
}

.chat-main {
  flex: 1;
  min-width: 0;
}

.chat-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.chat-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-right: 18rpx;
}

.chat-tag {
  font-size: 22rpx;
  padding: 0 18rpx;
  height: 38rpx;
  line-height: 38rpx;
  border-radius: 20rpx;
  margin-right: 18rpx;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2rpx 10rpx rgba(50, 120, 255, 0.18);
}
.tag-main {
  background: linear-gradient(90deg, #3e8fff, #6db6ff);
}
.tag-expert {
  background: linear-gradient(90deg, #2d8cf0, #5bc0eb);
}
.tag-patient {
  background: linear-gradient(90deg, #ff7e3f, #ffb86c);
}

.chat-time {
  margin-left: auto;
  font-size: 28rpx;
  color: #888;
  font-weight: 500;
}

.chat-msg {
  font-size: 26rpx;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400rpx;
}

.chat-unread {
  position: absolute;
  right: 36rpx;
  bottom: 36rpx;
  min-width: 40rpx;
  height: 40rpx;
  background: #0fdb4f;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(50, 205, 50, 0.18);
}
</style>
